<!-- ----------------------------
--  @author: 野狼上校           --
--  @create: 2024-07-16 15:13  --
--  @version: 1.0              --
-------------------------------->
<!-- 更新用户 -->

<template>
  <!-- 弹出框 -->
  <el-dialog
      :modal="dialogEditResourceVisible"
      title="修改资源"
      width="40%"
      @close="handleClose">

    <!--  表单  -->
    <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="editRules"
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="资源名称" prop="resourceName">
        <el-input v-model="dialogForm.resourceName"/>
      </el-form-item>

      <el-form-item label="资源URI" prop="resourceUri">
        <el-input v-model="dialogForm.resourceUri"/>
      </el-form-item>
    </el-form>

    <!--  按钮  -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm(dialogFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {validatorInput} from "@/validator";
import {SUCCESS} from "@/utils/constants.ts";
import {RespResult} from "@/api";
import {editResource} from "@/api/auth/resource.ts";

/*接收父类传过来的值*/
const props = defineProps(['dialogEditResourceVisible', 'resourceRowInfo'])

/*表单绑定*/
const dialogForm = ref({
  id: 0,
  resourceName: "",
  resourceUri: "",
});

const dialogFormRef = ref<FormInstance>();


/*input输入框规则校验*/
const editRules = reactive<FormRules<typeof dialogForm>>({
  resourceName: [{validator: validatorInput, required: true, trigger: 'blur'}],
  resourceUri: [{validator: validatorInput, required: true, trigger: 'blur'}],
})

/*监听弹出框的状态(显示 OR 隐藏)*/
watch(
    () => props.dialogEditResourceVisible,
    () => {
      if (props.dialogEditResourceVisible) {
        let resourceRowInfo = props.resourceRowInfo;
        dialogForm.value.id = resourceRowInfo.id;
        dialogForm.value.resourceName = resourceRowInfo.resourceName;
        dialogForm.value.resourceUri = resourceRowInfo.resourceUri;
      }
    });

/*修改父组件的数据*/
const emits = defineEmits(["update:modelValue", "initResourcesData"]);

/*关闭弹出框*/
const handleClose = () => {
  emits("update:modelValue", false);
}

/*确认提交*/
const handleConfirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      await editResource(JSON.stringify(dialogForm.value)).then(
          (response: RespResult) => {
            if (response.code === SUCCESS) {
              //关闭弹出框
              emits("update:modelValue", false);
              //刷新用户列表
              emits("initResourcesData");
            } else {
              ElMessage({
                message: response.message,
                type: "error"
              })
            }
          }
      )
    } else {
      return false;
    }
  })
}
</script>

<style scoped>

</style>